<template>
  <div class="full-box">
    <ViewLayout
      ref="layout"
      size="small"
      class="no-bottom-border no-pad"
      :condition-form-props="{size: 'small',buttonSize: 'small',submitIcon: 'ri-search-line', resetIcon: 'ri-brush-3-line'}"
      condition-form-layout="flex"
      :configs="configs"
      :config-tree-props="configTreeProps"
      @nodeClick="nodeClick"
      :has-add="false"
      :has-batch-remove="false"
      @cell-click="cellClick"
    >
      <template #leftTreeBehind>
        <div class="xj-content">
          <vxe-checkbox
            v-model="bhxjVal"
            checked-value="1"
            unchecked-value="0"
            @change="refreshList"
          >
            包含下级
          </vxe-checkbox>
        </div>
      </template>
    </ViewLayout>
    <BKModal
      v-model="visible"
      title="查看授权菜单"
      width="500"
      height="80%"
    >
      <ConfigTree
        :configs="treeConfigs"
        :tree-query-params="treeQueryParams"
        :has-add="false"
      />
    </BKModal>
  </div>
</template>

<script>
export default {
  name: 'PersonStatistics',
  components: {
    ViewLayout: () => import('../../../../../../../../bk-web-foundation/src/views/skeleton/components/view-layout.vue')
  },
  data () {
    return {
      configTreeProps: {
        nodeParam: this.$store.state.user.userInfo.DEPT_ID
      },
      configs: {
        tree: {
          url: '/ysjc/user/initQxshInfo',
          dictionaryKeys: ['DIC_WATF_B_UP_D'],
          includeSelf: true,
          canSortItem: false,
          sortKeyProps: { id: 'DEPT_ID', fid: 'PARENT_ID', order: 'ORDER_NUM' },
          hasIcon: false,
          canSwitchBzCode: false,
          appId: 'watf',
          bzCode: 'WATF',
          async: false,
          treeConfigId: 'DEPT_TREE',
          defaultExpandAll: false,
          management: {
            module: '部门',
            metaSet: 'WATF_B_SYS_DEPT',
            parentNodeProps: { PARENT_ID: 'id' },
            primaryKeyProps: { DEPT_ID: 'id' }
          },
          hasAdd: false
        },
        grid: {
          columnUrl: '/ysjc/user/personnelStatisticsHeader',
          dataUrl: 'ysjc/user/personnelStatisticsData',
          appId: 'watf',
          bzCode: 'WATF',
          metaSet: 'YSQ_AUTH_SYS_USER',
          parentNodeProps: { DEPT_ID: 'id' },
          operationWidth: 170,
          noOperation: true,
          modal: {
            width: 440
          },
          defaultQueryParamsProcessor: this.defaultQueryParamsProcessor,
          gridMethod: 'selectwatfWatfWatfBSysUserOrderByDeptOrderNum',
          afterFetchColumns: this.afterFetchColumns
        }
      },
      bhxjVal: '0',
      treeConfigs: {
        appId: 'YSJC',
        bzCode: 'YSJC',
        treeConfigId: 'YSJC_YHGL_CDXS_TREE'
      },
      treeQueryParams: { bzCode: 'YSJC' },
      visible: false
    }
  },
  methods: {
    afterFetchColumns (columns, flattenedColumns) {
      this.flattenedColumns = flattenedColumns
      columns.forEach(item => {
        if (item.field.startsWith('XTMC')) {
          item.visible = true
          item.width = 100
          item.formatter = ({ cellValue }) => (cellValue || 0)
          item.slots = {
            header: () => {
              return [
                <div style="white-space: pre">{this.formatterHeader(item.title)}</div>
              ]
            }
          }
        }
      })
      return columns
    },
    formatterHeader (title) {
      if (title.length > 4) {
        let str = title.slice(0, 3)
        str += '\n'
        str += title.slice(3)
        return str
      } else {
        return title
      }
    },
    nodeClick (data) {
      this.currentNode = data
    },
    refreshList () {
      if (!this.currentNode) return
      this.$refs.layout.refreshGrid()
    },
    defaultQueryParamsProcessor (params) {
      const methodParams = JSON.parse(params.methodParams)
      if (this.bhxjVal === '1') {
        const isLeaf = this.currentNode.isLeaf
        const leafIds = isLeaf ? [] : this.levelOrder(this.currentNode)
        methodParams.simpleQueryParam.push({
          field: 'DEPT_ID',
          value: isLeaf ? this.currentNode.id : leafIds.join(','),
          fieldValueRel: isLeaf ? 'like' : 'in'
        })
        methodParams.queryParam = {}
        params.methodParams = JSON.stringify(methodParams)
      } else {
        methodParams.queryParam = { DEPT_ID: this.currentNode.id }
        params.methodParams = JSON.stringify(methodParams)
      }
      return params
    },
    levelOrder (root) {
      const res = []; const queue = []
      queue.push(root)
      if (root === null) {
        return res
      }
      while (queue.length !== 0) {
        const length = queue.length
        for (let i = 0; i < length; i++) {
          const node = queue.shift()
          res.push(node.id)
          for (let n = 0; n < node.children?.length; n++) {
            if (node.children[n]) {
              queue.push(node.children[n])
            }
          }
        }
      }
      return res
    },
    cellClick ({ row, column }) {
      const columnConfig = this.flattenedColumns.find(item => item.field === column.property)
      if (columnConfig.custom1 && row[column.property]) {
        this.treeQueryParams = Object.assign(this.treeQueryParams, { USER_ID: row.USER_ID, APP_ID: columnConfig.custom1 })
        this.visible = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .xj-content {
  position: absolute;
  left: -9px;
  top: 40%;
  width: 36px;
  z-index: 8;
  border: 1px solid #c7deee;
  border-radius: 16px;
  background-color: #f5f7f9;
  padding: 8px;
  transform: translateY(-50%);

  .vxe-checkbox {
    text-align: center;
    display: flex;
    flex-direction: column;
  }

  .vxe-checkbox--icon {
    position: relative;
    display: block;
    margin: 0 auto;
    margin-left: 2px;
  }

  .vxe-checkbox--icon::before {
    height: 0.64em;
    width: 0.32em;
    left: 50%;
    top: 40%;
    border: 2px solid #fff;
    border-left: 0;
    border-top: 0;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .vxe-checkbox--label {
    line-height: 16px;
    display: block !important;
    font-size: 14px;
    width: 20px;
    padding-bottom: 6px;
    padding-top: 3px;
    min-height: 50px;
    white-space: normal !important;
    padding-left: 0 !important;
  }
}
</style>
